<template>
  <div class="type-page">
    <div class="type">
      <button
        v-for="item in typeList"
        :key="item"
        :class="type === item ? 'action-red' : ''"
        @click="typeHandle(item)"
      >
        {{ item }}
      </button>
    </div>

    <Happy8 v-if="type === '快乐8'" />
    <UnionLotto v-if="type === '双色球'" />
    <SuperLotto v-if="type === '大乐透'" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Happy8 from '../components/Happy8.vue'
import UnionLotto from '@/components/UnionLotto.vue'
import SuperLotto from '@/components/SuperLotto.vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const typeList = ref(['快乐8', '双色球', '大乐透'])
const type = ref('快乐8')

function typeHandle(value) {
  type.value = value
}

onMounted(() => {
  // proxy.$dialog.show({
  //   title: "提示",
  //   content: "不如跳舞",
  // });
})
</script>

<style scoped>
@import '../assets/index.css';
.type-page {
  max-width: 568px;
  margin: 0 auto;
  /* padding: 20px; */
  font-family: '微软雅黑';
  text-align: center;
  color: #000;
}
.type {
  padding: 18px 6px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.type button {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 16%;
  justify-content: center;
  align-items: center;
  padding: 6px 6px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
</style>
